<template>
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const isMobile = ref(true)
provide('isMobile', isMobile)
const isMobileDevice = () => {
  // 方法1: 检测用户代理字符串 (适用于大多数情况)
  const userAgent = navigator.userAgent.toLowerCase()
  const mobileKeywords = ['android', 'iphone', 'ipod', 'ipad', 'windows phone', 'blackberry', 'opera mini', 'iemobile', 'mobile']

  if (mobileKeywords.some((keyword) => userAgent.includes(keyword))) {
    return true
  }

  // 方法2: 检测触摸屏支持 (辅助判断)
  if ('maxTouchPoints' in navigator && navigator.maxTouchPoints > 0) {
    return true
  }
  if ('msMaxTouchPoints' in navigator && navigator.msMaxTouchPoints > 0) {
    return true
  }

  // 方法3: 检测屏幕尺寸和方向 (适用于平板等设备)
  const isSmallScreen = window.matchMedia('(max-width: 768px)').matches
  const isPortrait = window.matchMedia('(orientation: portrait)').matches

  return isSmallScreen && isPortrait
}

const watchIsMobile = () => {
  isMobile.value = isMobileDevice()
  // html上加一个类名用来区分手机和pc的样式
  if (isMobile.value) {
    document.documentElement.classList.add('mobile')
  } else {
    document.documentElement.classList.remove('mobile')
  }
}
watchIsMobile()
isMobile.value = isMobileDevice()
onMounted(() => {
  window.addEventListener('resize', watchIsMobile)
})
onUnmounted(() => {
  window.removeEventListener('resize', watchIsMobile)
})
</script>
